<template>
	<div id="player">
		<audio src="" ref="audio"></audio>
		<button class="playBtn">{{text}}</button>
	</div>
</template>

<script>
	import axios from "axios"
	export default{
		data(){
			return {
				text:"播放",
				audio:new Audio(),
				id:""
			}
		},
		methods:{
			getSong(){
//				this.audio.src="http://music.163.com/song/media/outer/url?id="+this.$store.state.msg;
//				this.audio.play();

//				在vuex中取值
				var id = this.$store.state.msg;
				//箭头函数，相当于做了指向的保存  var self=this
				axios.get("http://netease.bluej.cn/music/url?id="+id).then( (res)=>{
					this.detail=res.data.data;
					//给audio标签设置src
					this.$refs.audio.src=res.data.data[0].url;
					this.$refs.audio.play()
				})
			}
		},
//		computed:{
//				//计算属性： 依赖数据发生改变时，就会重新计算（触发事件）
//				song:function(){
//						this.audio.src="http://music.163.com/song/media/outer/url?id="+this.$store.state.msg;
//						this.audio.play();
//						return this.$store.state.msg;
//				}
//		}
	}
</script>

<style>
	#player{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		/*background: skyblue;*/
		height: 50px;
		text-align: left;
		/*position: absolute;*/
	}
</style>